<template>
  <div class="root-menu">
    <el-menu
      :default-active="activeMenu"
      @select="pushRouter"
      mode="horizontal"
      class="spc-menu-horizontal"
      menu-trigger="hover"
      text-color="#666666"
      active-text-color="#0169a9"
    >
    <!-- <el-menu-item v-for="(item, index) in menus" :key="index" :index="item.numUrl">{{$t(item.menuName)}}</el-menu-item> -->
      <!-- <MenuTree :menu-data="menus"></MenuTree> -->
    <template v-for="(menu, index) in menus">
      <el-submenu :key="`${index}`" :index="`${index}`" v-if="menu.children && menu.children.length > 0">
          <template slot="title">
              <span slot="title">{{menu.menuName}}</span>
          </template>
          <!-- <MenuTree :menu-data="menu.children"></MenuTree> -->
          <!-- 一级 -->
          <template v-for="(menu1, index1) in menu.children">
            <el-submenu :key="`${index}-${index1}`" :index="`${index}-${index1}`" v-if="menu1.children && menu1.children.length > 0" :popper-class="`${menus.length >= 9 && index === menus.length - 1 ? 'el-menu-horizontal-popup-last' : ''}`">
                <template slot="title">
                    <span slot="title">{{menu1.menuName}}</span>
                </template>
                <!-- 二级 -->
                <template v-for="(menu2, index2) in menu1.children">
                  <el-submenu :key="`${index}-${index1}-${index2}`" :index="`${index}-${index1}-${index2}`" v-if="menu2.children && menu2.children.length > 0">
                      <template slot="title">
                          <span slot="title">{{menu2.menuName}}</span>
                      </template>
                      <!-- 三级 -->
                      <template v-for="(menu3, index3) in menu2.children">
                        <el-submenu :key="`${index}-${index1}-${index2}-${index3}`" :index="`${index}-${index1}-${index2}-${index3}`" v-if="menu3.children && menu3.children.length > 0">
                            <template slot="title">
                                <span slot="title">{{menu3.menuName}}</span>
                            </template>
                        </el-submenu>
                        <el-menu-item :key="menu3.numUrl" :index="`/${menu3.numUrl}`" v-else>
                            <span slot="title">{{menu3.menuName}}</span>
                        </el-menu-item>
                      </template>
                  </el-submenu>
                  <el-menu-item :key="menu2.numUrl" :index="`/${menu2.numUrl}`" v-else>
                      <span slot="title">{{menu2.menuName}}</span>
                  </el-menu-item>
                </template>
            </el-submenu>
            <el-menu-item :key="menu1.numUrl" :index="`/${menu1.numUrl}`" v-else>
                <span slot="title">{{menu1.menuName}}</span>
            </el-menu-item>
          </template>
      </el-submenu>
      <el-menu-item :key="menu.numUrl" :index="`/${menu.numUrl}`" v-else>
          <span slot="title">{{menu.menuName}}</span>
      </el-menu-item>
    </template>
    </el-menu>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import { hasMenuPermission } from '@/permission/menu'
import { COMMON } from '@/utils/commonUtil'
import MenuTree from './MenuTree'
export default {
  /**
   * 菜单组件
   */
  name: 'RootMenu',
  props: {
  },
  data () {
    return {
    }
  },
  created () {
  },
  components: {MenuTree},
  methods: {
    // 公共字段方法映射出来
    ...mapActions('common', [
      'changeIndexName'
    ]),
    pushRouter (index) {
      console.log("菜单跳转:",index);
      if(index == '/null') {
        return;
      }
      if (COMMON.checkURL(index)) {
        let url = index.substring(1, index.length)
        window.open(url, '_blank')
      } else {
        COMMON.routerTo(index, this.$router)
      }
    }
  },
  computed: {
    ...mapState({
      // 将state里的数据映射出来
      menus: state => state.menu.menus
    }),
    activeMenu () { // 当前路由的菜单高亮 headerService：serviceCode === meta.activeMenu
      const route = this.$route
      const { meta, path } = route
      if (meta.indexs) { // 设置页面导航 curIndexName
        this.changeIndexName(meta.indexs)
      }
      if (meta.activeMenu) { // 注意这里很重要（每个菜单路由都必须配置,如果只有路由没有高亮菜单的就配null）
        return meta.activeMenu
      } else {
        return path
      }
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
$--menu-active-bg-color: #dbdbdb;
$--menu-active-color: #0169a9;
$--menu-text-color:#666666;
$--menu-text-font-size: 16px;
.root-menu {
  // .el-menu--horizontal>.menu-tree>.el-menu-item:not(.is-disabled):focus,.el-menu--horizontal>.menu-tree>.el-menu-item:not(.is-disabled):hover,.el-menu--horizontal>.menu-tree>.el-submenu .el-submenu__title:hover{background-color:#fff}
  // .el-menu--horizontal>.menu-tree>.el-menu-item{float:left;height:60px;line-height:60px;margin:0;border-bottom:2px solid transparent;color:#909399}
  // .el-menu--horizontal>.menu-tree>.el-menu-item a,.el-menu--horizontal>.menu-tree>.el-menu-item a:hover{color:inherit}
  // .el-menu--horizontal>.menu-tree>.el-submenu{float:left}
  // .el-menu--horizontal>.menu-tree>.el-submenu:focus,.el-menu--horizontal>.menu-tree>.el-submenu:hover{outline:none}
  // .el-menu--horizontal>.menu-tree>.el-submenu:focus .el-submenu__title,.el-menu--horizontal.menu-tree>.el-submenu:hover .el-submenu__title{color:#303133}
  // .el-menu--horizontal>.menu-tree>.el-submenu.is-active {border-bottom:2px solid #004a86;color:#303133}
  // .el-menu--horizontal>.menu-tree>.el-submenu.is-active .el-submenu__title{border-bottom:2px solid #004a86;color:#303133}
  // .el-menu--horizontal>.menu-tree>.el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:2px solid transparent;color:#909399}
  // .el-menu--horizontal>.menu-tree>.el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:8px;margin-top:-3px}
  // .el-menu--horizontal>.menu-tree>.el-menu-item.is-active{border-bottom:2px solid #004a86;color:#303133}
  .spc-menu-horizontal {
    text-align: center;
    // v2 ===s
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    // v2 ===end
    // padding: 0 40px; // v1
    .el-submenu {
      // margin-left:45px; // v1
      .el-submenu__title { // el-submenu__title
        height: 70px;
        line-height: 70px;
        background-color: #fff !important;
        color: $--menu-text-color !important; //防止被覆盖 el-menu text-color="#fff"
        font-size: $--menu-text-font-size;
        // padding: 0px 0px; // v1
        .menu-icon-title {
          // margin-right: 4.45px; // v1
          font-size: 24px;
        }
        .el-submenu__icon-arrow {
          display: none;
        }
        &:hover {
          color: $--menu-active-color !important;
        }
      }
    }
    .el-menu-item {
      height: 70px;
      line-height: 70px;
      color: $--menu-text-color !important;
      // width: 218.3px; // basic-layout-content-min-width / menus.length
      font-size: $--menu-text-font-size;
      // padding: 0 0px; // v1
      &:hover {
        color: $--menu-active-color !important;
      }
    }
    .el-menu-item.is-active {
      &::after {
        /*content 可为空 必须写这句*/
        content: '';
        /*设置margin: 0 auto; 加上相对定位的left和right都为零 可让伪元素在active中水平居中*/
        margin: 0 auto;
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        height: 6px;
        width: 30px;
        border-radius: 4px;
        background-color: $--menu-active-color;
      }
    }
    .is-active {
      // 没有子节点
      color: $--menu-active-color !important;
      border-bottom: 0px solid $--menu-active-color !important;
      &:hover {
        color: $--menu-active-color !important;
      }
      // 存在子节点
      .el-submenu__title {
        color: $--menu-active-color !important;
        border-bottom: 0px solid $--menu-active-color !important;
        &:hover {
          color: $--menu-active-color !important;
        }
        &::after {
          /*content 可为空 必须写这句*/
          content: '';
          /*设置margin: 0 auto; 加上相对定位的left和right都为零 可让伪元素在active中水平居中*/
          margin: 0 auto;
          position: absolute;
          bottom: 5px;
          left: 0;
          right: 0;
          height: 6px;
          width: 80px;
          border-radius: 4px;
          background-color: $--menu-active-color;
        }
      }
    }
  }
}
.el-menu--horizontal {
  .el-menu--popup {
    padding: 0px 0px;
    .el-submenu {
      .el-submenu__title {
        font-size: $--menu-text-font-size;
        height: 60px !important;
        line-height: 60px !important;
        padding: 0 20px;
        .el-submenu__icon-arrow {
          font-size: $--menu-text-font-size;
        }
        &:hover {
          background-color: $--menu-active-bg-color !important;
          color: $--menu-active-color !important;
        }
      }
    }
    .el-menu-item {
      padding: 0 20px !important;
      font-size: $--menu-text-font-size;
      height: 60px !important;
      line-height: 60px !important;
      &:hover {
        background-color: $--menu-active-bg-color;
        color: $--menu-active-color !important;
      }
    }
    .is-active {
      background-color:$--menu-active-bg-color !important; // style.scss -> .el-menu-item.is-active
      .el-submenu__title {
        background-color:$--menu-active-bg-color !important; // style.scss -> .el-menu-item.is-active
      }
    }
  }
}
.el-menu-horizontal-popup-last {
  left: -210px !important;
}
// v2 ===s
@media only screen and(max-width: 1450px) {
  .root-menu {
    .spc-menu-horizontal {
      .el-submenu {
        .el-submenu__title {
          padding: 0px 14px;
        }
      }
      .el-menu-item {
        padding: 0px 14px;
      }
    }
  }
}
@media only screen and (min-width: 1450px) and (max-width: 1500px) {
  .root-menu {
    .spc-menu-horizontal {
      .el-submenu {
        .el-submenu__title {
          padding: 0px 14px;
        }
      }
      .el-menu-item {
        padding: 0px 14px;
      }
    }
  }
}
@media only screen and (min-width: 1500px) and (max-width: 1550px) {
  .root-menu {
    .spc-menu-horizontal {
      .el-submenu {
        .el-submenu__title {
          padding: 0px 14px;
        }
      }
      .el-menu-item {
        padding: 0px 14px;
      }
    }
  }
}
@media only screen and (min-width: 1550px) and (max-width: 1650px) {
  .root-menu {
    .spc-menu-horizontal {
      .el-submenu {
        .el-submenu__title {
          padding: 0px 15px;
        }
      }
      .el-menu-item {
        padding: 0px 15px;
      }
    }
  }
}
@media only screen and (min-width: 1650px) and (max-width: 1700px) {
  .root-menu {
    .spc-menu-horizontal {
      .el-submenu {
        .el-submenu__title {
          padding: 0px 16px;
        }
      }
      .el-menu-item {
        padding: 0px 16px;
      }
    }
  }
}
@media only screen and (min-width: 1700px) and (max-width: 1750px) {
  .root-menu {
    .spc-menu-horizontal {
      .el-submenu {
        .el-submenu__title {
          padding: 0px 17px;
        }
      }
      .el-menu-item {
        padding: 0px 17px;
      }
    }
  }
}
@media only screen and (min-width: 1750px) and (max-width: 1800px) {
  .root-menu {
    .spc-menu-horizontal {
      .el-submenu {
        .el-submenu__title {
          padding: 0px 18px;
        }
      }
      .el-menu-item {
        padding: 0px 18px;
      }
    }
  }
}
@media only screen and (min-width: 1800px) and (max-width: 1850px) {
  .root-menu {
    .spc-menu-horizontal {
      .el-submenu {
        .el-submenu__title {
          padding: 0px 19px;
        }
      }
      .el-menu-item {
        padding: 0px 19px;
      }
    }
  }
}
</style>
